<template>
  <div class="v-student">
    <!--填写学生信息-->
    <div class="title">{{ $t('message.writeStudentInfo') }}</div>
    <!--学校-->
    <div class="label">{{$t('message.personalIdentitySchool')}}:</div>
    <!--请填写学校名称-->
    <input type="text" @click.stop="stopEv" @keyup="getSchoolList" @keyup.40="goToDownList" @keyup.38="goToUpList" @keydown.enter="getTargetItem" v-model="data.school" class="input input-long school-name" :placeholder="this.$t('message.pleaseFillSchoolName')"/>
    <ul class="select-dropdown" v-if="isShowSchoolList">
      <li v-for="(item, index) in selection" @click.stop="selectItem(index)" @mouseenter="mouseMove(index)" :class="{chooseLi: index === nowIndex}">{{ item.name }}</li>
    </ul>
    <div class="error-tips" v-if="schoolError">
      {{$t('message.inputSchool')}}
    </div>
    <!--学区-->
    <div class="label">{{$t('message.personalIdentityDistrict')}}:</div>
    <div class="select">
    	<v-select-long :tip="districtTip" :selection="schoolDistrictList" :init="data.schoolDistrict" @on-select="onSelect('schoolDistrict', $event)"></v-select-long>
    </div>
    <!--<div class="error-tips" v-if="schoolDistrictError">-->
      <!--请选择学区-->
    <!--</div>-->
    <!--学历-->
    <div class="label">{{$t('message.personalIdentityEducation')}}:</div>
    <div class="select">
      <v-select-long :tip="educationTip" :selection="educationListRebuild" :init="data.education" @on-select="onSelect('education', $event)"></v-select-long>
    </div>
    <!--学院-->
    <div class="label">{{$t('message.personalIdentityCollege')}}:</div>
    <!--请填写学院-->
    <input type="text" v-model="data.institute" class="input input-long" :placeholder="this.$t('message.pleaseFillCollegeName')" />
    <div class="error-tips" v-if="instituteError">
      {{$t('message.inputCollege')}}
    </div>
    <!--专业-->
    <div class="label">{{$t('message.personalIdentityProfession')}}:</div>
    <!--请填写专业-->
    <input type="text" v-model="data.major" class="input input-long" :placeholder="this.$t('message.pleaseFillProfessionName')" />
    <div class="error-tips" v-if="majorError">
      {{$t('message.inputMajoy')}}
    </div>
    <!--年级-->
    <div class="label">{{$t('message.personalIdentityGrade')}}:</div>
    <!--请填写年级-->
    <input type="text" v-model="data.grade" class="input input-long" :placeholder="this.$t('message.pleaseFillGrade')" />
    <div class="error-tips" v-if="gradeError">
      {{$t('message.inputGrade')}}
    </div>
    <!--学号-->
    <div class="label">{{$t('message.personalIdentityNumber')}}:</div>
    <!--请填写学号-->
    <input type="text" v-model="data.studentID" class="input input-long" :placeholder="this.$t('message.pleaseFillStudentNumber')" />
    <div class="error-tips" v-if="studentIDError">
      {{$t('message.inputStudyNum')}}
    </div>
    <!--入读日期-->
    <div class="label">{{$t('message.personalIdentityEnrolledDate')}}:</div>
    <!--示例: 1900/01/01-->
    <!--<el-date-picker-->
      <!--v-model="data.enrolledDate"-->
      <!--type="date"-->
      <!--:placeholder="$t('message.personalIdentityEnrolledDate')"-->
      <!--format="dd/MM/yyyy"-->
      <!--:editable="false"-->
      <!--style="width:600px;margin-top:12px;">-->
    <!--</el-date-picker>-->
     <input type="text" onkeypress="return (event.keyCode>=48&&event.keyCode<=57) || (event.which>=48&&event.which<=57 || event.which === 8)" @keyup="filterVal('enrolledDate')" v-model="data.enrolledDate" class="input input-long" maxlength="10" :placeholder="`${this.$t('message.exampleHolder')}: 1990/01/01(${this.$t('message.calendar')})`" />
    <div class="error-tips" v-if="enrolledDateError">
      <!--{{$t('message.inputStudyDate')}}-->
      {{ readDateTxt }}
    </div>
    <!--证件类型-->
    <div class="label">{{$t('message.personalIdentityCertificateType')}}:</div>
    <div class="choose-group">
      <div class="choose" :class="{ chooseActive: data.photoSource === 'studentCard' }" @click.stop="changePhotoSource('studentCard')">{{$t('message.personalIdentityStudentCardPicture')}}</div>
      <div class="choose" :class="{ chooseActive: data.photoSource === 'campusNetwork' }" @click.stop="changePhotoSource('campusNetwork')">{{$t('message.personalIdentitySchoolNetworkPicture')}}</div>
    </div>
    <template v-if="data.photoSource === 'studentCard'">
      <!--学生卡有效期-->
      <div class="label">{{$t('message.personalIdentityStudentCardValidity')}}:</div>
      <div class="input-group">
        <!--<el-date-picker-->
          <!--v-model="data.endDate"-->
          <!--type="date"-->
          <!--:placeholder="$t('message.personalIdentityStudentCardValidity')"-->
          <!--format="dd/MM/yyyy"-->
          <!--:editable="false"-->
          <!--style="width:600px;margin-top:12px;">-->
        <!--</el-date-picker>-->
        <!--<input type="text" onkeypress="return (event.keyCode>=48&&event.keyCode<=57) || (event.which>=48&&event.which<=57 || event.which === 8)" @keyup="filterVal('startDate')" v-model="data.startDate" class="input input-short" maxlength="10" :placeholder="`${this.$t('message.exampleHolder')}: 1990/01/01(${this.$t('message.calendar')})`" />-->
         <input type="text" onkeypress="return (event.keyCode>=48&&event.keyCode<=57) || (event.which>=48&&event.which<=57 || event.which === 8)" @keyup="filterVal('endDate')" v-model="data.endDate" class="input input-long" maxlength="10" :placeholder="`${this.$t('message.exampleHolder')}: 1990/06/01(${this.$t('message.calendar')})`" />
      </div>
      <!--<div class="error-tips" v-if="studentCardError">-->
        <!--{{$t('message.studyCardInDate')}}-->
        <!--{{ studentCarStartTxt }}-->
      <!--</div>-->
      <div class="error-tips" v-if="studentCardErrorEnd">
        <!--{{$t('message.studyCardInDate')}}-->
        {{ studentCarEndTxt }}
      </div>
    </template>
    <div class="upload">
      <v-upload-image :delete-image="deleteImage" @uploadImage="upload($event)" :image="data.photo">
        <template v-if="data.photoSource === 'studentCard'">
          <!--请上传学生卡照片-->
          <span slot="text">{{$t('message.personalIdentityUploadStudentCardPicture')}}</span>
          <template slot="illustrate"></template>
          <!--学生卡照片s-->
          <img slot="photo" src="../../assets/images/register/sutdent_card.png" :alt="this.$t('message.personalIdentityStudentCardPicture')" />
        </template>
        <template v-else>
          <!--请上传校网照片-->
          <span slot="text">{{$t('message.personalIdentityUploadSchoolNetworkPicture')}}</span>
          <template slot="illustrate"></template>
          <!--校网照片-->
          <img slot="photo" src="../../assets/images/register/campus_netword_photo.png" :alt="this.$t('message.personalIdentitySchoolNetworkPicture')" />
        </template>
      </v-upload-image>
    </div>
    <div class="error-tips" v-if="photoError">
      {{$t('message.inputPic')}}
    </div>
  </div>
</template>

<script>
import VUploadImage from '@/components/base/VUploadImage'
import VSelectLong from '@/components/base/VSelectLong'
// import { checkDate } from '@/common/js/index'
// import { getCookie } from '@/util/util'

export default {
  name: 'VStudent',
  components: {
    VUploadImage,
    VSelectLong
  },
  props: {
    sort: {
      type: String,
      default: ''
    },
    parentData: {
      type: Object,
      default () {
        return {
          school: '',
          schoolDistrict: '',
          education: '',
          institute: '',
          major: '',
          grade: '',
          studentID: '',
          enrolledDate: '',
          photoSource: 'studentCard',
//          startDate: '',
          endDate: '',
          photo: ''
        }
      }
    }
  },
  data () {
    return {
      false: false,
      true: true,
      data: {
        school: this.parentData.school || '',
        schoolDistrict: this.parentData.schoolDistrict || '',
        education: this.parentData.education || '',
        institute: this.parentData.institute || '',
        major: this.parentData.major || '',
        grade: this.parentData.grade || '',
        studentID: this.parentData.studentID || '',
        enrolledDate: this.parentData.enrolledDate || '',
        photoSource: this.parentData.photoSource || 'studentCard',
          //        startDate: this.parentData.startDate || '',
        endDate: this.parentData.endDate || '',
        photo: this.parentData.photo || ''
      },
      deleteImage: 0,
      schoolDistrictList: [],
      districtTip: this.$t('message.chooseDistrict'),
      educationTip: this.$t('message.chooseEducation'),
      educationList: [this.$t('message.juniorCollege'), this.$t('message.underGraduate'), this.$t('message.master'), this.$t('message.doctor')],
      schoolError: false,
      schoolStatus: 0,
        //      schoolDistrictError: false,
      schoolDistrictStatus: 0,
      instituteError: false,
      instituteStatus: 0,
      majorError: false,
      majorStatus: 0,
      gradeError: false,
      gradeStatus: 0,
      studentIDError: false,
      studentIDStatus: 0,
      enrolledDateError: false,
      enrolledDateStatus: 0,
      studentCardError: false,
      startDateStatus: 0,
      endDateStatus: 0,
      educationStatus: 0,
      photoError: false,
      photoStatus: 0,
      isShowSchoolList: false,
      selection: [],
      nowIndex: -1,
      studentCardErrorEnd: false,
      schoolIndex: -1
      // userBirthDate: ''
    }
  },
  computed: {
    readDateTxt () {
      if (this.enrolledDateStatus === 2) {
      // return '请输入正确的入读日期'
        return this.$t('message.inputStudyDate')
      } else if (this.enrolledDateStatus === 3) {
      // return '入读日期不能小于出生日期'
        return this.$t('message.readDateNOLessBirthDate')
      }
    },
    /* studentCarStartTxt () {
         2 '学生卡开始有效期格式不正确'
         3 '学生卡开始有效期不能大于学生卡结束有效期'
         4 '请输入正确的学生卡开始有效期'
       if (this.startDateStatus === 2) {
         return this.$t('message.studentStartFormatError')
       } else if (this.startDateStatus === 3) {
         return this.$t('message.studentStartNoGreaterStudentEnd')
       } else if (this.startDateStatus === 4) {
         return this.$t('message.inputRightStudentStart')
       }
     },*/
    studentCarEndTxt () {
      if (this.endDateStatus === 2) {
      //  return '学生卡结束有效期格式不正确'
        return this.$t('message.studentEndFormatError')
      } else if (this.endDateStatus === 3) {
      //        return '学生卡结束有效期不能小于学生卡开始有效期'
        return this.$t('message.studentEndNoLessStudentStart')
      } else if (this.endDateStatus === 4) {
      //        return '请输入正确的学生卡结束有效期'
        return this.$t('message.inputRightStudentEnd')
      }
    },
    isHandParent () {
      if (this.data.photoSource === 'studentCard') {
        if (this.schoolStatus === 1 && this.schoolDistrictStatus === 1 && this.educationStatus === 1 && this.instituteStatus === 1 && this.majorStatus === 1 && this.gradeStatus === 1 && this.studentIDStatus === 1 && this.enrolledDateStatus === 1 && this.photoStatus === 1 && this.endDateStatus === 1) {
          return 'ok'
        } else {
          return 'no'
        }
      } else if (this.data.photoSource === 'campusNetwork') {
        if (this.schoolStatus === 1 && this.schoolDistrictStatus === 1 && this.educationStatus === 1 && this.instituteStatus === 1 && this.majorStatus === 1 && this.gradeStatus === 1 && this.studentIDStatus === 1 && this.enrolledDateStatus === 1 && this.photoStatus === 1) {
          return 'ok'
        } else {
          return 'no'
        }
      }
    },
    educationListRebuild () {
      var arr = []
      this.educationList.forEach((item, index) => {
        arr.push({
          name: item
        })
      })
      return arr
    }
  },
  watch: {
    isHandParent (val) {
      if (val === 'ok') {
        this.$emit('change-params', this.data)
      } else if (val === 'no') {
        this.$emit('change-params', 'no')
      }
    },
    // 学校
    'data.school' (val) {
      clearTimeout(this.schoolTimer)
      this.schoolTimer = setTimeout(() => {
        this.schoolInput()
      }, 900)
    },
    // 学区
    'data.schoolDistrict' (val) {
      if (val) {
        this.schoolDistrictStatus = 1
      }
    },
    // 学历
    'data.education' (val) {
      if (val) {
        this.educationStatus = 1
      }
    },
    // 学院
    'data.institute' (val) {
      clearTimeout(this.schoolTimer)
      this.schoolTimer = setTimeout(() => {
        if (/^\s*$/g.test(val)) {
          this.instituteStatus = 2
          this.instituteError = true
        } else {
          this.instituteStatus = 1
          this.instituteError = false
        }
      }, 900)
    },
    // 专业
    'data.major' (val) {
      clearTimeout(this.majorTimer)
      this.majorTimer = setTimeout(() => {
        if (/^\s*$/g.test(val)) {
          this.majorStatus = 2
          this.majorError = true
        } else {
          this.majorStatus = 1
          this.majorError = false
        }
      }, 900)
    },
    //    年级
    'data.grade' (val) {
      clearTimeout(this.gradeTimer)
      this.gradeTimer = setTimeout(() => {
        if (/^\s*$/g.test(val)) {
          this.gradeStatus = 2
          this.gradeError = true
        } else {
          this.gradeStatus = 1
          this.gradeError = false
        }
      }, 900)
    },
    // 学号
    'data.studentID' (val) {
      clearTimeout(this.studentIDTimer)
      this.studentIDTimer = setTimeout(() => {
        if (/^\s*$/g.test(val)) {
          this.studentIDStatus = 2
          this.studentIDError = true
        } else {
          this.studentIDStatus = 1
          this.studentIDError = false
        }
      }, 900)
    },
    // 入读日期
    'data.enrolledDate' (newVal, oldVal) {
      // ------月日年验证方法，勿删--------------------------------------------
      /*if (newVal.length === 1) {
        if (newVal > oldVal) {
          if (newVal.charAt(0) !== '1' && newVal.charAt(0) !== '0') {
            this.data.enrolledDate = '0' + newVal + '/'
          }
        }
      } else if (newVal.length === 2) {
        if (newVal.charAt(0) === '1') {
          if (parseInt(newVal.charAt(1)) > 2) {
            this.data.enrolledDate = newVal.substring(0, 1)
            return
          }
          if (newVal.substring(0, 2) === '00') {
            this.data.enrolledDate = newVal.substring(0, 1)
            return
          }
          if (newVal > oldVal) {
            this.data.enrolledDate = newVal + '/'
          }
        }
      } else if (newVal.length === 3) {
        if (newVal > oldVal) {
          if (parseInt(newVal.charAt(2)) > 3) {
            this.data.enrolledDate = newVal.substring(0, 2) + '/0' + newVal.charAt(2)
            return
          }
          if (newVal.charAt(2) !== '/') {
            this.data.enrolledDate = newVal.substring(0, 2) + '/' + newVal.charAt(2)
          }
        }
      } else if (newVal.length === 4) {
        if (newVal > oldVal) {
          if (parseInt(newVal.charAt(3)) > 3) {
            this.data.enrolledDate = newVal.substring(0, 3) + '0' + newVal.charAt(3)
          }
        }
      } else if (newVal.length === 5) {
        if (newVal > oldVal) {
          if (newVal.charAt(3) === '3') {
            if (newVal.substring(0, 2) === '01' || newVal.substring(0, 2) === '03' || newVal.substring(0, 2) === '05' || newVal.substring(0, 2) === '07' || newVal.substring(0, 2) === '08' || newVal.substring(0, 2) === '10' || newVal.substring(0, 2) === '12') {
              if (parseInt(newVal.charAt(4)) > 1) {
                this.data.enrolledDate = newVal.substring(0, 4)
                return
              }
            } else if (newVal.substring(0, 2) === '04' || newVal.substring(0, 2) === '04' || newVal.substring(0, 2) === '06' || newVal.substring(0, 2) === '09' || newVal.substring(0, 2) === '11') {
              if (parseInt(newVal.charAt(4)) > 0) {
                this.data.enrolledDate = newVal.substring(0, 4)
                return
              }
            } else if (newVal.substring(0, 2) === '02') {
              this.data.enrolledDate = newVal.substring(0, 3)
              return
            }
          }
          if (newVal.substring(3, 5) === '00') {
            this.data.enrolledDate = newVal.substring(0, 3)
            return
          }
          this.data.enrolledDate = newVal + '/'
        }
      } else if (newVal.length === 6) {
        if (newVal > oldVal) {
          if (newVal.charAt(5) !== '/') {
            this.data.enrolledDate = newVal.substring(0, 5) + '/' + newVal.charAt(5)
          }
        }
      }*/
      // ------年月日验证方法，勿删--------------------------------------------
      if (newVal.length === 4) {
        if (newVal > oldVal) {
          newVal = newVal + '/'
          this.data.enrolledDate = newVal
        }
      } else if (newVal.length === 5) {
        if (newVal.charAt(4) !== '/') {
          if (newVal.charAt(4) !== '0' && newVal.charAt(4) !== '1') {
            newVal = newVal.substring(0, 4) + '/0' + newVal.charAt(4)
            this.data.enrolledDate = newVal
          } else {
            newVal = newVal.substring(0, 4) + '/' + newVal.charAt(4)
            this.data.enrolledDate = newVal
          }
        }
      } else if (newVal.length === 6) {
        if (newVal.charAt(5) !== '1' && newVal.charAt(5) !== '0') {
          if (newVal > oldVal) {
            newVal = newVal.substring(0, 5) + '0' + newVal.charAt(5) + '/'
            this.data.enrolledDate = newVal
          }
        }
      } else if (newVal.length === 7) {
        if (newVal.charAt(5) === '1') {
          if (parseInt(newVal.charAt(6)) > 2) {
            newVal = newVal.substring(0, 6)
            this.data.enrolledDate = newVal
          } else {
            if (newVal > oldVal) {
              newVal = newVal + '/'
              this.data.enrolledDate = newVal
            }
          }
        } else if (newVal.charAt(5) === '0') {
          if (newVal > oldVal) {
            newVal = newVal + '/'
            this.data.enrolledDate = newVal
          }
        }
      } else if (newVal.length === 8) {
        if (newVal.charAt(7) !== '/') {
          if (newVal.charAt(7) !== '0' && newVal.charAt(7) !== '1' && newVal.charAt(7) !== '2' && newVal.charAt(7) !== '3') {
            newVal = newVal.substring(0, 7) + '/0' + newVal.charAt(7)
            this.data.enrolledDate = newVal
          } else {
            newVal = newVal.substring(0, 7) + '/' + newVal.charAt(7)
            this.data.enrolledDate = newVal
          }
        }
      } else if (newVal.length === 9) {
        if (newVal.charAt(8) !== '1' && newVal.charAt(8) !== '2' && newVal.charAt(8) !== '3' && newVal.charAt(8) !== '0') {
          if (newVal > oldVal) {
            newVal = newVal.substring(0, 8) + '0' + newVal.charAt(8)
            this.data.enrolledDate = newVal
          }
        }
        if (newVal.substring(5, 7) === '02') {
          if (parseInt(newVal.charAt(8)) > 2) {
            newVal = newVal.substring(0, 8)
            this.data.enrolledDate = newVal
          }
        }
      } else if (newVal.length === 10) {
        if (newVal.substring(5, 7) === '01' || newVal.substring(5, 7) === '03' || newVal.substring(5, 7) === '05' || newVal.substring(5, 7) === '07' || newVal.substring(5, 7) === '08' || newVal.substring(5, 7) === '10' || newVal.substring(5, 7) === '12') {
          if (newVal.charAt(8) === '3') {
            if (parseInt(newVal.charAt(9)) > 1) {
              newVal = newVal.substring(0, 9)
              this.data.enrolledDate = newVal
              return
            }
          }
        } else if (newVal.substring(5, 7) === '04' || newVal.substring(5, 7) === '06' || newVal.substring(5, 7) === '09' || newVal.substring(5, 7) === '11') {
          if (newVal.charAt(8) === '3') {
            if (parseInt(newVal.charAt(9)) > 0) {
              newVal = newVal.substring(0, 9)
              this.data.enrolledDate = newVal
              return
            }
          }
        } else if (newVal.substring(5, 7) === '02') {
          if (parseInt(newVal.substring(0, 4)) % 4 === 0) {
            if (newVal.substring(2, 4) === '00') {
              if (parseInt(newVal.substring(0, 2)) % 4 !== 0) {
                if (newVal.charAt(9) === '9' && newVal.charAt(8) === '2') {
                  newVal = newVal.substring(0, 9)
                  this.data.enrolledDate = newVal
                  return
                }
              }
            }
          } else {
            if (newVal.charAt(9) === '9' && newVal.charAt(8) === '2') {
              newVal = newVal.substring(0, 9)
              this.data.enrolledDate = newVal
              return
            }
          }
        }
      }
      clearTimeout(this.enrolledDateTimer)
      this.enrolledDateTimer = setTimeout(() => {
        if (/^(\d{4})\/(\d{2})\/(\d{2})$/.test(newVal) && new Date(newVal).getTime() < new Date().getTime()) {
          let enrolledDate = newVal.split('/')
          if (Number(enrolledDate[0]) === 0 || Number(enrolledDate[1]) > 12 || Number(enrolledDate[1]) === 0 || Number(enrolledDate[2]) > 31 || Number(enrolledDate[2]) === 0) {
            this.enrolledDateStatus = 2
            this.enrolledDateError = true
          } else {
            this.enrolledDateStatus = 1
            this.enrolledDateError = false
          }
        } else {
          this.enrolledDateStatus = 2
          this.enrolledDateError = true
        }
      }, 900)
      //  clearTimeout(this.enrolledDateTimer)
      //  this.enrolledDateTimer = setTimeout(() => {
      //    if (newVal === null) {
      //      this.enrolledDateStatus = 2
      //      this.enrolledDateError = true
      //    } else if (new Date(newVal).getTime() > new Date().getTime()) {
      //      this.enrolledDateStatus = 2
      //      this.enrolledDateError = true
      //    } else {
      //      this.enrolledDateStatus = 1
      //      this.enrolledDateError = false
      //    }
      //  }, 900)
    },
    // 学生卡有效期---开始:

    /*'data.startDate' (newVal, oldVal) {
     if (newVal.length === 4) {
       if (newVal > oldVal) {
         newVal = newVal + '/'
         this.data.startDate = newVal
       }
     } else if (newVal.length === 5) {
       if (newVal.charAt(4) !== '/') {
         if (newVal.charAt(4) !== '0' && newVal.charAt(4) !== '1') {
           newVal = newVal.substring(0, 4) + '/0' + newVal.charAt(4)
           this.data.startDate = newVal
         } else {
           newVal = newVal.substring(0, 4) + '/' + newVal.charAt(4)
           this.data.startDate = newVal
         }
       }
     } else if (newVal.length === 6) {
       if (newVal.charAt(5) !== '1' && newVal.charAt(5) !== '0') {
         if (newVal > oldVal) {
           newVal = newVal.substring(0, 5) + '0' + newVal.charAt(5) + '/'
           this.data.startDate = newVal
         }
       }
     } else if (newVal.length === 7) {
       if (newVal.charAt(5) === '1') {
         if (parseInt(newVal.charAt(6)) > 2) {
           newVal = newVal.substring(0, 6)
           this.data.startDate = newVal
         } else {
           if (newVal > oldVal) {
             newVal = newVal + '/'
             this.data.startDate = newVal
           }
         }
       } else if (newVal.charAt(5) === '0') {
         if (newVal > oldVal) {
           newVal = newVal + '/'
           this.data.startDate = newVal
         }
       }
     } else if (newVal.length === 8) {
       if (newVal.charAt(7) !== '/') {
         if (newVal.charAt(7) !== '0' && newVal.charAt(7) !== '1' && newVal.charAt(7) !== '2' && newVal.charAt(7) !== '3') {
           newVal = newVal.substring(0, 7) + '/0' + newVal.charAt(7)
           this.data.startDate = newVal
         } else {
           newVal = newVal.substring(0, 7) + '/' + newVal.charAt(7)
           this.data.startDate = newVal
         }
       }
     } else if (newVal.length === 9) {
       if (newVal.charAt(8) !== '1' && newVal.charAt(8) !== '2' && newVal.charAt(8) !== '3' && newVal.charAt(8) !== '0') {
         if (newVal > oldVal) {
           newVal = newVal.substring(0, 8) + '0' + newVal.charAt(8)
           this.data.startDate = newVal
         }
       }
       if (newVal.substring(5, 7) === '02') {
         if (parseInt(newVal.charAt(8)) > 2) {
           newVal = newVal.substring(0, 8)
           this.data.startDate = newVal
         }
       }
     } else if (newVal.length === 10) {
       if (newVal.substring(5, 7) === '01' || newVal.substring(5, 7) === '03' || newVal.substring(5, 7) === '05' || newVal.substring(5, 7) === '07' || newVal.substring(5, 7) === '08' || newVal.substring(5, 7) === '10' || newVal.substring(5, 7) === '12') {
         if (newVal.charAt(8) === '3') {
           if (parseInt(newVal.charAt(9)) > 1) {
             newVal = newVal.substring(0, 9)
             this.data.startDate = newVal
             return
           }
         }
       } else if (newVal.substring(5, 7) === '04' || newVal.substring(5, 7) === '06' || newVal.substring(5, 7) === '09' || newVal.substring(5, 7) === '11') {
         if (newVal.charAt(8) === '3') {
           if (parseInt(newVal.charAt(9)) > 0) {
             newVal = newVal.substring(0, 9)
             this.data.startDate = newVal
             return
           }
         }
       } else if (newVal.substring(5, 7) === '02') {
         if (parseInt(newVal.substring(0, 4)) % 4 === 0) {
           if (newVal.substring(2, 4) === '00') {
             if (parseInt(newVal.substring(0, 2)) % 4 !== 0) {
               if (newVal.charAt(9) === '9' && newVal.charAt(8) === '2') {
                 newVal = newVal.substring(0, 9)
                 this.data.startDate = newVal
                 return
               }
             }
           }
         } else {
           if (newVal.charAt(9) === '9' && newVal.charAt(8) === '2') {
             newVal = newVal.substring(0, 9)
             this.data.startDate = newVal
             return
           }
         }
       }
     }
     clearTimeout(this.startDateTimer)
     this.startDateTimer = setTimeout(() => {
       if (/^(\d{4})\/(\d{2})\/(\d{2})$/.test(newVal)) {
         let endData = this.data.endDate.split('/')
         let startDate = newVal.split('/')
          取消结束有效期的错误提示
         if (this.endDateStatus === 3) {
           this.endDateStatus = 1
           this.studentCardErrorEnd = false
         }
         if (Number(startDate[1]) > 12) {
           this.startDateStatus = 4
           this.studentCardError = true
            判断结束有效期是否已经输入了值
         } else if (endData.length !== 1) {
           if (Number(endData[0]) < Number(startDate[0]) || (Number(endData[0]) === Number(startDate[0]) && Number(endData[1]) < Number(startDate[1])) || (Number(endData[0]) === Number(startDate[0]) && Number(endData[1]) === Number(startDate[1]) && Number(endData[2]) < Number(startDate[2]))) {
             this.startDateStatus = 3
             this.studentCardError = true
           } else {
             this.startDateStatus = 1
             this.studentCardError = false
           }
         } else {
           this.startDateStatus = 1
           this.studentCardError = false
         }
       } else {
         this.startDateStatus = 2
         this.studentCardError = true
       }
     }, 900)
   },*/
    // 学生卡有效期---结束
    'data.endDate' (newVal, oldVal) {
      if (newVal.length === 4) {
        if (newVal > oldVal) {
          newVal = newVal + '/'
          this.data.endDate = newVal
        }
      } else if (newVal.length === 5) {
        if (newVal.charAt(4) !== '/') {
          if (newVal.charAt(4) !== '0' && newVal.charAt(4) !== '1') {
            newVal = newVal.substring(0, 4) + '/0' + newVal.charAt(4)
            this.data.endDate = newVal
          } else {
            newVal = newVal.substring(0, 4) + '/' + newVal.charAt(4)
            this.data.endDate = newVal
          }
        }
      } else if (newVal.length === 6) {
        if (newVal.charAt(5) !== '1' && newVal.charAt(5) !== '0') {
          if (newVal > oldVal) {
            newVal = newVal.substring(0, 5) + '0' + newVal.charAt(5) + '/'
            this.data.endDate = newVal
          }
        }
      } else if (newVal.length === 7) {
        if (newVal.charAt(5) === '1') {
          if (parseInt(newVal.charAt(6)) > 2) {
            newVal = newVal.substring(0, 6)
            this.data.endDate = newVal
          } else {
            if (newVal > oldVal) {
              newVal = newVal + '/'
              this.data.endDate = newVal
            }
          }
        } else if (newVal.charAt(5) === '0') {
          if (newVal > oldVal) {
            newVal = newVal + '/'
            this.data.endDate = newVal
          }
        }
      } else if (newVal.length === 8) {
        if (newVal.charAt(7) !== '/') {
          if (newVal.charAt(7) !== '0' && newVal.charAt(7) !== '1' && newVal.charAt(7) !== '2' && newVal.charAt(7) !== '3') {
            newVal = newVal.substring(0, 7) + '/0' + newVal.charAt(7)
            this.data.endDate = newVal
          } else {
            newVal = newVal.substring(0, 7) + '/' + newVal.charAt(7)
            this.data.endDate = newVal
          }
        }
      } else if (newVal.length === 9) {
        if (newVal.charAt(8) !== '1' && newVal.charAt(8) !== '2' && newVal.charAt(8) !== '3' && newVal.charAt(8) !== '0') {
          if (newVal > oldVal) {
            newVal = newVal.substring(0, 8) + '0' + newVal.charAt(8)
            this.data.endDate = newVal
          }
        }
        if (newVal.substring(5, 7) === '02') {
          if (parseInt(newVal.charAt(8)) > 2) {
            newVal = newVal.substring(0, 8)
            this.data.endDate = newVal
          }
        }
      } else if (newVal.length === 10) {
        if (newVal.substring(5, 7) === '01' || newVal.substring(5, 7) === '03' || newVal.substring(5, 7) === '05' || newVal.substring(5, 7) === '07' || newVal.substring(5, 7) === '08' || newVal.substring(5, 7) === '10' || newVal.substring(5, 7) === '12') {
          if (newVal.charAt(8) === '3') {
            if (parseInt(newVal.charAt(9)) > 1) {
              newVal = newVal.substring(0, 9)
              this.data.endDate = newVal
              return
            }
          }
        } else if (newVal.substring(5, 7) === '04' || newVal.substring(5, 7) === '06' || newVal.substring(5, 7) === '09' || newVal.substring(5, 7) === '11') {
          if (newVal.charAt(8) === '3') {
            if (parseInt(newVal.charAt(9)) > 0) {
              newVal = newVal.substring(0, 9)
              this.data.endDate = newVal
              return
            }
          }
        } else if (newVal.substring(5, 7) === '02') {
          if (parseInt(newVal.substring(0, 4)) % 4 === 0) {
            if (newVal.substring(2, 4) === '00') {
              if (parseInt(newVal.substring(0, 2)) % 4 !== 0) {
                if (newVal.charAt(9) === '9' && newVal.charAt(8) === '2') {
                  newVal = newVal.substring(0, 9)
                  this.data.endDate = newVal
                  return
                }
              }
            }
          } else {
            if (newVal.charAt(9) === '9' && newVal.charAt(8) === '2') {
              newVal = newVal.substring(0, 9)
              this.data.endDate = newVal
              return
            }
          }
        }
      }
      clearTimeout(this.endDateTimer)
      this.endDateTimer = setTimeout(() => {
        if (/^(\d{4})\/(\d{2})\/(\d{2})$/.test(newVal) && new Date(newVal).getTime() + 86400000 > new Date().getTime()) {
          let endDate = newVal.split('/')
          if (Number(endDate[0]) === 0 || Number(endDate[1]) > 12 || Number(endDate[1]) === 0 || Number(endDate[2]) > 31 || Number(endDate[2]) === 0) {
            this.endDateStatus = 4
            this.studentCardErrorEnd = true
          } else {
            this.endDateStatus = 1
            this.studentCardErrorEnd = false
          }
        } else {
          this.endDateStatus = 4
          this.studentCardErrorEnd = true
        }
      }, 900)
      //  clearTimeout(this.endDateTimer)
      //  this.endDateTimer = setTimeout(() => {
      //    if (newVal === null) {
      //      this.endDateStatus = 4
      //      this.studentCardErrorEnd = true
      //    } else if (new Date(newVal).getTime() + 86400000 < new Date().getTime()) {
      //      this.endDateStatus = 4
      //      this.studentCardErrorEnd = true
      //    } else {
      //      this.endDateStatus = 1
      //      this.studentCardErrorEnd = false
      //    }
      //  }, 900)
    },
    parentData (val) {
      this.data = val
      // 如果有传入的数据，初始化选中状态
      for (let key in this.data) {
        if (this.data[key] && this.data[key] !== '') {
          this[`${key}Status`] = 1
        }
      }
//      如果是注册页面，则不执行
      if (!this.sort) {
        // 如果data有学区信息，初始化学区列表
        if (this.data.schoolDistrict && this.data.schoolDistrict !== '') {
          this.getSchoolListUse().then((res) => {
            this.selection.forEach((item, index) => {
              if (item.name === this.data.school) {
                this.selectItem(index)
                return
              }
            })
          })
        }
      }
    }
  },
  methods: {
    schoolInput () {
      if (this.data.school === '') {
        this.schoolDistrictList = []
        this.schoolError = false
        this.schoolIndex = -1
        this.isShowSchoolList = false
        this.schoolStatus = 0
        this.schoolError = false
        return
      }
      if (/^\s+$/g.test(this.data.school)) {
        this.schoolStatus = 2
        this.schoolError = true
        return
      }
      //  没有获取到学校列表时
      if (this.selection.length === 0) {
        return
      }
      for (let x = 0; x < this.selection.length; x++) {
        if (this.selection[x].name === this.data.school) {
          this.schoolIndex = x
          break
        }
        if (x === this.selection.length - 1 && this.selection[x].name !== this.data.school) {
          this.schoolIndex = -1
        }
      }
      if (this.schoolIndex === -1) {
        this.schoolStatus = 2
        this.schoolError = true
        this.schoolDistrictList = []
      } else {
        this.getSchoolArea(this.selection[this.schoolIndex].id)
        //      判断学校输入框是否是正确的值
        this.schoolStatus = 1
        this.schoolError = false
      }
    },
    // 获取学区
    getSchoolArea (val) {
      this.data.schoolDistrict = ''
      let t = window.localStorage.getItem('thaiPayMallLanguage')
      var languageType
      if (t) {
        if (t === 'cn') {
          languageType = 1
        } else if (t === 'en') {
          languageType = 3
        } else {
          languageType = 2
        }
      } else {
        languageType = 2
      }
      this.$ajax.getSchoolArea({
        school_id: val,
        type: languageType
      }).then((res) => {
        if (res.code === 200) {
          this.schoolDistrictList = res.data
          this.data.schoolDistrict = res.data[0].name
        } else if (res.code === 202) {
          this.$store.commit('alert', {
            switch: true
          })
        } else {
        }
      }).catch((err) => {
        this.$store.commit('alert', {
          switch: true
        })
      })
    },
    // 阻止学校列表收起
    stopEv () {
      return
    },
    // 鼠标在列表上移动时
    mouseMove (val) {
      this.nowIndex = val
      this.data.school = this.selection[this.nowIndex].name
    },
    // 按向上键盘时
    goToUpList () {
      if (this.nowIndex > 0) {
        this.nowIndex--
        this.data.school = this.selection[this.nowIndex].name
      }
    },
    // 按向下键盘时
    goToDownList () {
      if (this.nowIndex < this.selection.length - 1) {
        this.nowIndex++
        this.data.school = this.selection[this.nowIndex].name
      }
    },
    // 按下enter键时
    getTargetItem () {
      this.getSchoolArea(this.selection[this.nowIndex].id)
      this.data.school = this.selection[this.nowIndex].name
      this.isShowSchoolList = false
      this.nowIndex = -1
      //  判断学校输入框是否是正确的值
      this.schoolStatus = 1
      this.schoolError = false
    },
    // 点击每一个学校名字时
    selectItem (val) {
      this.getSchoolArea(this.selection[val].id)
      this.data.school = this.selection[val].name
      this.isShowSchoolList = false
      this.nowIndex = -1
      //      判断学校输入框是否是正确的值
      this.schoolStatus = 1
      this.schoolError = false
    },
//    获取学校列表
    getSchoolList (ev) {
      let e = ev || event
      if (e.keyCode === 37 || e.keyCode === 38 || e.keyCode === 39 || e.keyCode === 40 || e.keyCode === 13) {
        return
      } else {
        let t = window.localStorage.getItem('thaiPayMallLanguage')
        var languageType
        if (t) {
          if (t === 'cn') {
            languageType = 1
          } else if (t === 'en') {
            languageType = 3
          } else {
            languageType = 2
          }
        } else {
          languageType = 2
        }
        this.$ajax.getSchool({
          key_word: this.data.school,
          type: languageType
        }).then((res) => {
          if (res.code === 200) {
            this.selection = res.data
            this.isShowSchoolList = true
          } else if (res.code === 202) {
            console.log('请求数据失败')
            // 清空学校的列表并且隐藏
            this.selection = []
            this.isShowSchoolList = false
            this.schoolStatus = 2
            this.schoolError = true
          } else if (res.code === 301) {
          } else {
          }
        }).catch((err) => {
          this.$store.commit('alert', {
            switch: true
          })
        })
      }
    },
    getSchoolListUse () {
      let t = window.localStorage.getItem('thaiPayMallLanguage')
      var languageType
      if (t) {
        if (t === 'cn') {
          languageType = 1
        } else if (t === 'en') {
          languageType = 3
        } else {
          languageType = 2
        }
      } else {
        languageType = 2
      }
      return this.$ajax.getSchool({
        key_word: this.data.school,
        type: languageType
      }).then((res) => {
        if (res.code === 200) {
          this.selection = res.data
          return new Promise((resolve, reject) => {
            resolve('ok')
          })
        } else if (res.code === 202) {
          this.$store.commit('alert', {
            switch: true
          })
        } else {
        }
      }).catch((err) => {
        this.$store.commit('alert', {
          switch: true
        })
      })
    },
    filterVal (x) {
      this.data[x] = this.data[x].replace(/[^\d/]/g, '')
    },
    onSelect (attr, val) {
      if (val instanceof Object) {
        this.data[attr] = val.name
      } else {
        this.data[attr] = val
      }
    },
    changePhotoSource (str) {
      this.data.photoSource = str
      if (this.data.photo !== '') {
        this.deleteImage += 1
      }
    },
    upload (val) {
      if (val) {
        this.data.photo = val
        this.photoStatus = 1
        this.photoError = false
        // this.data[attr + 'OfIDCard'] = val
      } else {
        this.photoStatus = 2
        this.data.photo = val
        this.photoError = true
        // this.data[attr + 'OfIDCard'] = val
      }
    }
  },
  mounted () {
    document.documentElement.scrollTop = 160
    document.body.scrollTop = 160
    document.addEventListener('click', () => {
      this.isShowSchoolList = false
      this.nowIndex = -1
    })
    // 如果有传入的数据，初始化选中状态
    for (let key in this.data) {
      if (this.data[key] && this.data[key] !== '') {
        this[`${key}Status`] = 1
      }
    }
    // 如果data有学区信息，初始化学区列表
    if (this.data.schoolDistrict && this.data.schoolDistrict !== '') {
      this.getSchoolListUse().then((res) => {
        this.selection.forEach((item, index) => {
          if (item.name === this.data.school) {
            this.selectItem(index)
            return
          }
        })
      })
    }
  }
}
</script>

<style scoped>
.title {
  line-height: 22px;
  font-size: 16px;
  font-weight: bold;
  padding-left: 18px;
  padding-bottom: 16px;
  position: relative;
}

.title:before {
  content: '';
  display: block;
  width: 4px;
  height: 15px;
  background-color: #ff600a;
  position: absolute;
  top: 4px;
  left: 0;
}

.label {
  line-height: 20px;
  margin-top: 24px;
}

.input-group {
  /*font-size: 0;*/
}

.input {
  height: 48px;
  border: 1px solid #d7d7d7;
  border-radius: 2px;
  box-sizing: border-box;
  margin-top: 12px;
  padding: 0 15px;
}

.input-short {
  width: 288px;
  margin-right: 24px;
}

.input-short:last-child {
  margin-right: 0;
}

.choose-group {
  height: 48px;
  margin-top: 12px;
  overflow: hidden;
}

.choose {
  float: left;
  width: 158px;
  height: 46px;
  line-height: 46px;
  border: 1px solid #d7d7d7;
  border-radius: 2px;
  text-align: center;
  color: #a5a5a5;
  margin-right: 24px;
  cursor: pointer;
}

.choose:last-child {
  margin-right: 0;
}

.chooseActive {
  color: #333;
  border: 1px solid #ff600a;
  background: url(../../assets/images/icon_check.png) no-repeat right top;
}

.input-long {
  width: 600px;
}
.school-name {
  position: relative;
}

.upload {
  margin-top: 60px;
}

  .select-dropdown {
    width: 600px;
    max-height: 300px;
    overflow: auto;
    border: 1px solid #d7d7d7;
    background-color: #fff;
    box-sizing: border-box;
    position: absolute;
    z-index: 2;
  }

  .select-dropdown li {
    height: 30px;
    line-height: 30px;
    padding-left: 15px;
    cursor: pointer;
  }

  .chooseLi {
    color: #fff;
    background-color: #1e90ff;
  }
  /*.select-dropdown li:hover {*/
    /*color: #fff;*/
    /*background-color: #1e90ff;*/
  /*}*/
.select {
  width: 600px;
  margin-top: 12px;
}
</style>
